<script setup lang="ts">
/**
 * Vue组件 - 与Python后端交互的任务管理器
 * 该组件演示了Vue前端如何通过HTTP请求与Python后端进行交互
 */
import { ref, onMounted } from 'vue'
import axios from 'axios'

// 定义响应式数据
const taskStatus = ref('')      // 任务状态
const progress = ref(0)         // 任务进度
const taskId = ref('')          // 任务ID
const message = ref('')         // 任务消息

/**
 * 启动新任务
 * 向后端发送POST请求以启动新任务
 */
const startTask = async () => {
  try {
    // 向后端发送POST请求启动任务 (更新API路径)
    const response = await axios.post('http://127.0.0.1:5000/api/tasks/start')

    // 更新本地状态
    taskId.value = response.data.task_id
    taskStatus.value = 'started'
    message.value = 'Task started'

    // 开始轮询任务状态
    pollTaskStatus()
  } catch (error) {
    // 处理请求错误
    console.error('Error starting task:', error)
    message.value = 'Failed to start.py task'
  }
}

/**
 * 轮询任务状态
 * 定期向后端查询任务状态并更新UI
 */
const pollTaskStatus = () => {
  // 如果没有任务ID，则不进行轮询
  if (!taskId.value) return

  // 每秒查询一次任务状态
  const interval = setInterval(async () => {
    try {
      // 向后端发送GET请求获取任务状态 (更新API路径)
      const response = await axios.get(`http://127.0.0.1:5000/api/tasks/status/${taskId.value}`)

      // 更新本地状态
      taskStatus.value = response.data.status
      progress.value = response.data.progress
      message.value = response.data.message

      // 如果任务已完成或出错，停止轮询
      if (response.data.status === 'completed' || response.data.status === 'error') {
        clearInterval(interval)
      }
    } catch (error) {
      // 处理请求错误并停止轮询
      console.error('Error fetching task status:', error)
      clearInterval(interval)
    }
  }, 1000)
}

/**
 * 重置任务
 * 向后端发送DELETE请求以重置任务状态
 */
const resetTask = async () => {
  // 如果没有任务ID，则不执行重置操作
  if (!taskId.value) return

  try {
    // 向后端发送DELETE请求重置任务 (更新API路径)
    await axios.delete(`http://127.0.0.1:5000/api/tasks/reset/${taskId.value}`)

    // 重置本地状态
    taskStatus.value = ''
    progress.value = 0
    taskId.value = ''
    message.value = 'Task reset'
  } catch (error) {
    // 处理请求错误
    console.error('Error resetting task:', error)
    message.value = 'Failed to reset task'
  }
}

/**
 * 组件挂载时的初始化操作
 */
onMounted(() => {
  message.value = 'Click "Start Task" to begin'
})
</script>

<template>
  <div class="task-manager">
    <h1>Python-Vue交互Demo</h1>

    <!-- 控制按钮 -->
    <div class="controls">
      <!-- 启动任务按钮，任务进行中时禁用 -->
      <button @click="startTask" :disabled="taskStatus === 'started'">Start Task</button>
      <!-- 重置任务按钮 -->
      <button @click="resetTask">Reset</button>
    </div>

    <!-- 任务状态显示区域 -->
    <div class="status">
      <p><strong>状态:</strong> {{ taskStatus || '未开始' }}</p>
      <p><strong>信息:</strong> {{ message }}</p>
      <p v-if="taskId"><strong>任务ID:</strong> {{ taskId }}</p>

      <!-- 进度条显示区域 -->
      <div v-if="progress > 0" class="progress">
        <label>进度:</label>
        <div class="progress-bar">
          <!-- 进度条填充部分，宽度根据进度动态调整 -->
          <div class="progress-fill" :style="{ width: progress + '%' }"></div>
        </div>
        <span class="progress-text">{{ progress }}%</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 任务管理器容器样式 */
.task-manager {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

/* 控制按钮区域样式 */
.controls {
  margin: 20px 0;
}

/* 按钮通用样式 */
button {
  background-color: #4CAF50;    /* 绿色背景 */
  border: none;                 /* 无边框 */
  color: white;                 /* 白色文字 */
  padding: 10px 20px;           /* 内边距 */
  text-align: center;           /* 文字居中 */
  text-decoration: none;        /* 无下划线 */
  display: inline-block;        /* 行内块元素 */
  font-size: 16px;              /* 字体大小 */
  margin: 4px 2px;              /* 外边距 */
  cursor: pointer;              /* 鼠标指针样式 */
  border-radius: 4px;           /* 圆角边框 */
}

/* 禁用按钮样式 */
button:disabled {
  background-color: #cccccc;    /* 灰色背景 */
  cursor: not-allowed;          /* 禁止手势 */
}

/* 第二个按钮（重置按钮）样式 */
button:nth-child(2) {
  background-color: #f44336;    /* 红色背景 */
}

/* 状态显示区域样式 */
.status {
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #ddd;       /* 灰色边框 */
  border-radius: 4px;           /* 圆角边框 */
  background-color: #f9f9f9;    /* 浅灰色背景 */
}

/* 状态信息段落样式 */
.status p {
  margin: 10px 0;
}

/* 进度条容器样式 */
.progress {
  margin: 15px 0;
}

/* 进度条轨道样式 */
.progress-bar {
  width: 100%;
  background-color: #e0e0e0;    /* 浅灰色背景 */
  border-radius: 5px;           /* 圆角边框 */
  overflow: hidden;             /* 隐藏溢出部分 */
  height: 20px;                 /* 固定高度 */
  position: relative;           /* 相对定位 */
}

/* 进度条填充部分样式 */
.progress-fill {
  height: 100%;
  background-color: #4CAF50;    /* 绿色背景 */
  transition: width 0.3s;       /* 宽度变化动画 */
}

/* 进度文本样式 */
.progress-text {
  display: block;
  text-align: center;
  margin-top: 5px;
  font-weight: bold;
}
</style>
